<template>
  <div class="app-container">
    <xh-list-head
      @on-search="handleSearch"
      ref="TableHead"
      crmType="system"
      :fielname="fielname"
      :listHander="listHander"
      :defaultDateRang="defaultDateRang"
    />
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="加载中"
      :height="tableHeight"
      use-virtual
      stripe
      border
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        show-overflow-tooltip
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column label="ID" align="center" fixed="left">
        <template slot-scope="scope">
          {{ scope.row.actpathid }}
        </template>
      </el-table-column>
      <el-table-column label="路线名称" align="center" fixed>
        <template slot-scope="scope">
          {{ scope.row.pathname }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行人" align="center">
        <template slot-scope="scope">
          {{ scope.row.exename }}
        </template>
      </el-table-column>
      <el-table-column label="执行开始时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.exestart }}
        </template>
      </el-table-column>
      <el-table-column label="执行结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.exeend }}
        </template>
      </el-table-column>
      <el-table-column label="点检项" align="center">
        <template slot-scope="scope">
          {{ scope.row.itemcount }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="任务状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.pathstatus | statusFilter">{{
            scope.row.pathstatus | formatStatus
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            class="xm-btn--primary"
            type="primary"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="p-contianer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size.sync="pageSize"
        :total="total"
        :pager-count="5"
        class="p-bar"
        background
        layout="prev, pager, next, sizes, total, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 路线详情 -->
    <inspection-system-detail
      :visible.sync="showDView"
      :id="actpathid"
      :detail="rowDetail"
      @close="showDView = false"
      @handleItem="handleItem"
    />

    <!-- 路线点检项详情 -->
    <div
      v-show="showItemView"
      class="full-container"
      :style="{ 'z-index': zIndex + 1 }"
    >
      <inspection-system-item-detail
        :visible.sync="showItemView"
        :id="actitemid"
        @close="showItemView = false"
      />
    </div>
  </div>
</template>

<script>
import XhListHead from "@/components/XhListHead/index.vue";
import TableMixin from "@/views/mixins/Table";
import { getPathListAPI } from "@/api/inspection";
import InspectionSystemDetail from "./Detail.vue";
import InspectionSystemItemDetail from "./ItemDetail.vue";
import { getMaxIndex } from "@/utils/index";
import moment from "moment";
export default {
  name: "VueAdminTemplateMasterTable",

  mixins: [TableMixin],

  components: {
    XhListHead,
    InspectionSystemDetail,
    InspectionSystemItemDetail,
  },

  data() {
    return {
      list: null,
      listLoading: true,

      // 默认搜索事件
      defaultDateRang: [
        moment().subtract(30, "days").calendar(),
        moment().add(1, "days"),
      ],

      //详情
      showDView: false,
      actpathid: "",
      rowDetail: {}, //选中行详情

      showItemView: false,
      actitemid: "",

      zIndex: getMaxIndex(),

      //导出
      fielname: "点检路径",
      listHander: {
        pathname: "路线名称",
        createt: "创建时间",
        exename: "执行人",
        exestart: "执行开始时间",
        exeend: "执行结束时间",
        itemcount: "点检项",
        pathstatus: "任务状态",
      },
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.search = {
        ...this.$refs.TableHead.formatSearch(),
      };
      this.getList(this.search);
    });
  },

  methods: {
    getList(search) {
      this.listLoading = true;
      if (search && search.hasOwnProperty("dutystatus")) {
        search.pathstatus = search.dutystatus;
        delete search.dutystatus;
      }
      if (search && search.hasOwnProperty("executets")) {
        search.exestart = search.executets;
        search.exeend = search.executete;
        delete search.executets;
        delete search.executete;
      }
      getPathListAPI({
        pagenum: this.currentPage - 1,
        pagesize: this.pageSize,
        ...search,
      }).then((res) => {
        this.tableData = res.Data;
        this.total = res.Total;
        this.listLoading = false;
      });
    },

    /**查看*/
    handleEdit(index, row) {
      this.showDView = true;
      this.actpathid = row.actpathid;
      this.rowDetail = row;
    },

    /**路径点检项 */
    handleItem(params) {
      this.actitemid = params.actitemid;
      this.showItemView = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.full-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>